<template>
  <div class="system-customer">
    <xr-header/>
    <div
      class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </div>
      <div class="system-view-content">
        <div class="option-bar">
          <el-row type="flex" justify="start" style="margin-left: -14px;margin-top: 15px">
            <el-form :inline="true" :model="queryForm" label-width='80px' inline size='mini'>


              <el-form-item label="实例状态">
                <el-select v-model="queryForm.type" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!--                <el-form-item label="发起人">-->
              <!--                  <el-input v-model="queryForm.startUserNo"></el-input>-->
              <!--                </el-form-item>-->
              <el-form-item label="模型名称">
                <el-input v-model="queryForm.keyWord" clearable></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="queryForm.times"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  unlink-panels
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  end-placeholder="结束日期">
                </el-date-picker>

              </el-form-item>
              <el-form-item style="margin-left: 14px">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

          </el-row>
        </div>



        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @select="tableSelect"
              @select-all="tableSelect"
            >
              <el-table-column
                label="序号"
                fixed
                type="index"
                width="50"
                fixed
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="subject"
                label="主题"

                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="subject"
                label="流程最新审批节点"

                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{getNewTask(scope.row)}}
                </template>
              </el-table-column>

              <el-table-column
                prop="title"
                label="标题"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="发起时间"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button size='mini' type='text' @click="details(scope.row.procId)">查看</el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>


</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
  import {tagReadMsg} from "@/api/msg"
  import {getStartUpRuningList} from "@/api/startup"
  import {getBpmnModelCategory} from "@/api/analy";


  import XrHeader from '@/components/XrHeader'
  export default {
    name: 'Task',
    components: {
      XrHeader
    },

    data() {
      return {
        options: [{
          value: 'running',
          label: '运行'
        }, {
          value: 'completed',
          label: '完成'
        }, {
          value: 'invalid',
          label: '作废'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        checkTableData: [],
        tableData: [],
        tableHeight: 450,
        total: 0,
        chartVisible: false,
        chartData: {},
        sellerId: 0,
        queryDate: [],
        shopName: [],
        queryForm: {
          start: "",
          end: "",
          times: [],
          name: "",
          title: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          whereSql: "",
          type: "",
          startUserNo: "",
          keyWord: "",
          typeKey: ""
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },

    created() {
      this.getData()
    },
    methods: {
      getNewTask(data) {
        var newTask = data.newTask
        var result='-'
        if (newTask) {
          result = newTask.map(t=>t.taskName).join(',');
        }
        return result
      },

      remove: function () {
        var checkTableData = this.checkTableData;
        var ids = [];

        for (var i = 0; i < checkTableData.length; i++) {
          ids.push(checkTableData[i].id);
        }
        tagReadMsg({ids: ids}).then((response) => {
          if (response.code == 0) {
            this.checkTableData = []
            this.getData()
          }
        })

      },
      tableSelect: function (data) {
        this.checkTableData = data;
      },
      queryFormCreateTime: function (e) {
        this.queryForm.createTime = e;
      },
      details: function (processInstanceId) {
        this.$router.push({
          name: 'runDetails',
          query: {t: new Date().getTime(), "processInstanceId": processInstanceId}
        })
      },
      queryMethod: function () {
        this.getStartUpRuningListData();

      },
      refreshTask: function (data) {
        if (data[0].parentId == '-1') {
          this.queryForm.typeKey = ""
        } else {
          this.queryForm.typeKey = data[0].typeKey;

        }
        this.queryForm.page = 1
        this.queryForm.createTime = ""
        this.queryDate = [];
        this.queryForm.times = [];
        this.queryForm.start = "";
        this.queryForm.end = "";

        this.getStartUpRuningListData();

      },
      getStartUpRuningListData: function () {

        const obj = JSON.parse(JSON.stringify(this.queryForm))
        delete (obj['times'])
        getStartUpRuningList(obj).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        this.getStartUpRuningListData()

      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },

      search() {
        if (this.queryForm.times) {

          this.queryForm.start = this.queryForm.times[0]
          this.queryForm.end = this.queryForm.times[1]
        }
        this.queryForm.page = 1
        this.queryForm.typeKey = ""
        this.queryMethod()
      },
      reset() {
        this.queryForm.typeKey = "";
        this.queryForm.startUserNo = "";
        this.queryForm.keyWord = "";
        this.queryForm.title = "";
        this.queryDate = [];
        this.queryForm.times = [];
        this.queryForm.start = "";
        this.queryForm.end = "";
        this.queryForm.type = "";
        this.queryForm.page = 1

        this.queryMethod()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

</style>
<style lang="scss" scoped>
  .message-header {
    margin-left: 28px;
    height: 60px;
    .title-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .message-body {
    position: relative;
    height: calc(100% - 75px);
    padding-left: 15px;
  }
  .message-content {
    position: relative;
    height: 100%;
  }

  .message-body-side {
    padding: 20px 0;
    width: 200px;
    font-size: 14px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow-y: auto;
    .side-item {
      position: relative;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-size: 13px;
      cursor: pointer;
      i {
        color: #999;
      }
    }
  }
  .message-body-content {
    margin-left: 210px;
    height: 100%;
    overflow: hidden;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
  }

</style>
